import {
	$
} from './library/jquery.js';
import cookie from './library/cookie.js';

let shop = cookie.get('shop');

if (shop != '[]' && shop != undefined) {
	shop = JSON.parse(shop);

	let idList = shop.map(el => el.id).join();

	$.ajax({
		type: "get",
		url: "../../interface/getItems.php",
		data: {
			idList: idList
		},
		dataType: "json",
		success: function (res) {

			let temp = '';
			let zj = 0;

			res.forEach(elm => {
				let pic = JSON.parse(elm.picture);
				if (pic[0].src == 'images/product/p1-0.webp') {
					pic.shift();
				}

				let type = JSON.parse(elm.type);

				// 让ajax请求到的数据结果中遍历后的id与cookie中数据的id 相同
				let current = shop.filter(val => val.id == elm.id);

				temp += `
				<ul class="shop-pro">
				<li>
					<div class="shop-check checked"></div>
				</li>
				<li class="pro-img">
					<a href="./02.details.html?id=${current[0].id}">
						<img src="../${pic[0].src}" alt="">
					</a>
				</li>
				<li class="pro-title">
					<a href="./02.details.html?id=${current[0].id}">${elm.title}${current[0].color}/${current[0].config}</a>
				</li>
				<li class="pro-price"><span>￥${current[0].price}</span></li>
				<li class="pro-num clr">
					<div class="num-sub"></div>
					<div class="num-show">${current[0].num}</div>
					<div class="num-add"></div>
				</li>
				<li class="pro-delate"><a href="javascript: ;" class="del" data-id="${elm.id}"></a></li>
			</ul>
				`;
				zj += parseFloat(type[0].price) * current[0].num;
			});

			$('.zongjia').append('<span>￥</span>' + zj.toFixed(2));

			$('.proList').append(temp);
			$('.pro-delate>a').on('click', function () {
				let res = shop.filter(el => el.id != $(this).attr('data-id'));
				cookie.set('shop', JSON.stringify(res), 1);
				location.reload();

			});

			$('.num-show').each(i => {
				if ($('.num-show').eq(i).text() == 1) {
					$('.num-show').eq(i).siblings('.num-sub').addClass('disable');
				}
				if ($('.num-show').eq(i).text() == 10) {
					$('.num-show').eq(i).siblings('.num-add').addClass('disable');
				}
			})
			$('.num-sub').on('click', function () {
				let proNum = Number($(this).siblings('.num-show').text());
				if (proNum == 1) {
					$(this).addClass('disable');
				}
				if (proNum > 1) {
					proNum--;
					if (proNum == 1) {
						$(this).addClass('disable');
						$(this).siblings('.num-add').removeClass('disable');
					} else {
						$(this).removeClass('disable');
					}
				}
				$(this).siblings('.num-show').text(proNum);
			})
			$('.num-add').on('click', function () {
				let proNum = Number($(this).siblings('.num-show').text());
				$(this).siblings('.num-sub').removeClass('disable');
				if (proNum < 10) {
					proNum++;
					if (proNum == 10) {
						$(this).addClass('disable');
						$(this).siblings('.num-sub').removeClass('disable');
					} else {
						$(this).removeClass('disable');
					}
				}
				$(this).siblings('.num-show').text(proNum);
			})

			$('.pro-num>div').on('click', function () {
				let p1 = [];
				$('.pro-price>span').each(i => {
					p1.push($('.pro-price>span').eq(i).text().slice(1) * $('.pro-price>span').eq(i).parent().siblings('.pro-num').children('.num-show').text());
				})

				let zj = 0;
				p1.forEach(elm => {
					zj += elm;
				});
				$('.zongjia').text('￥' + zj.toFixed(2));

				let id_c = $(this).parent().siblings('.pro-delate').children().attr('data-id');

				let r1 = shop.filter(elm => elm.id == id_c);
				r1[0].num = $(this).siblings('.num-show').text();

				cookie.set('shop', JSON.stringify(shop), 1);

			})

			$('.shop-check').on('click', function () {
				$(this).toggleClass('checked');

				let p2 = $(this).parent().siblings('.pro-price').children().text().slice(1) * $(this).parent().siblings('.pro-num').children('.num-show').text();

				let zj2 = +$('.zongjia').text().slice(1);

				if (!$(this).hasClass('checked')) {
					let newZj1 = zj2 - p2;
					$('.zongjia').text('￥' + newZj1.toFixed(2));
				} else {
					let newZj2 = zj2 + p2;
					$('.zongjia').text('￥' + newZj2.toFixed(2));
				}

				if (!$('.shop-check').hasClass('checked')) {
					$('.jiesuan').removeClass('actived');
				} else {
					$('.jiesuan').addClass('actived');
				}
			});


		}

	});
} else {
	$('.shop-content').addClass('hide');
	$('.shop-empty').removeClass('hide');
}